<template>
  <div class="myBigScreen-container">
    <div class="myBigScreen flex-column height-100" ref="myBigScreenRef">
      <screenHeader />
      <div class="flex-row height-100">
        <screenLeft />
        <div class="flex-column flex-1 margin-left-20">
          <screenTop />
          <screenBottom />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="myBigScreen">
import { ref, Ref, onMounted, onBeforeUnmount } from "vue";
import { screenHeader, screenTop, screenLeft, screenBottom } from "./components/index";
const myBigScreenRef = ref<HTMLElement | null>(null);

onMounted(() => {
  // 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
  if (myBigScreenRef.value) {
    myBigScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    myBigScreenRef.value.style.width = `1920px`;
    myBigScreenRef.value.style.height = `1080px`;
  }
  // 为浏览器绑定事件
  window.addEventListener("resize", resize);
});

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};

// 监听浏览器 resize 事件
const resize = () => {
  if (myBigScreenRef.value) {
    myBigScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

// 销毁时触发
onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
